<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- Vue 检测数据变化的原理:
        1. Vue 会监视 data 中所有层次的数据

        2. 如何检测对象中的数据?
            通过 setter 实现监视, 且要在 new Vue 时就传入要检测的数据, 对象中后追加的属性,
            Vue 默认不做响应式处理, 如果需要给后追加的属性做响应式,需要调用如下 API:
            Vue.set(target, propertyName/index, value)
            vm.$set(target, propertyName/index, value)\

        3. 如何检测数组中的数据?
            通过包裹数组更新元素的方法实现, 本质就是做了两件事.
            调用原生对应的方法对数组进行更新; 重新解析模板, 进而更新页面;

        4. 在 Vue 需要操作数组时, 需要调用如下方法操作数据:
            push; pop; shift; unshift; splice; sort; reverse;
            Vue.set 或 vm.$set

        特别注意: Vue.set 和 vm.$set 不能给 vm 或 vm 的根数据对象添加属性 -->

    <h2>学生信息</h2>
    <button @click.once="student.age++">年龄加一</button>
    <button @click.once="addSex('男')">添加性别属性</button>
    <button @click.once="addFriend()">在朋友列表首位添加朋友</button>
    <br><br>
    <button @click.once="updateFirstFriendName('张三')">修改第一个朋友的名字为张三</button>
    <button @click.once="addHobby('玩电脑')">添加一个爱好</button>
    <button @click.once="updateHobby(0, '学习')">修改第一个爱好</button>
    <button @click.once="removeHobby(1)">删除一个爱好</button>
    <h3>姓名: {{ student.name }}</h3>
    <h3>年龄: {{ student.age }}</h3>
    <h3 v-if="student.sex">性别: {{ student.sex }}</h3>
    <h3>爱好</h3>
    <ul>
        <li v-for="(hobby, index) in student.hobbys" :key="index">
            {{ hobby }}
        </li>
    </ul>
    <h3>朋友</h3>
    <ul>
        <li v-for="(friend, index) in student.friends" :key="index">
            {{ friend.name }}: {{ friend.age }}
        </li>
    </ul>
</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            student: {
                name: 'Tom',
                age: 23,
                hobbys: [
                    '抽烟',
                    '喝酒',
                    '烫头',
                ],
                friends: [{
                    name: 'Jerry',
                    age: 18,
                }, {
                    name: 'Tony',
                    age: 24,
                }]
            }
        },

        methods: {
            addSex(sex) {
                // Vue.set(this.student, 'sex', sex)
                this.$set(this.student, 'sex', sex)
            },

            addFriend() {
                this.student.friends.splice(0, 0, {
                    name: 'Jack',
                    age: 31,
                })
            },

            updateFirstFriendName(newName) {
                this.student.friends[0].name = newName
            },

            addHobby(newHobby) {
                this.student.hobbys.push(newHobby)
            },

            updateHobby(index, newHobby) {
                this.student.hobbys.splice(index, 1, newHobby)
            },

            removeHobby(index) {
                this.student.hobbys = this.student.hobbys.filter((hobby) => {
                    return hobby !== this.student.hobbys[index]
                })

                // this.student.hobbys.splice(index, 1) // 可以直接使用 splice 删除指定元素
            }
        }
    })
</script>
</body>
</html>